<template>
  <div style="background: rgb(6,24,45);">
    <div class="head" style="justify-content: space-between;">
      <div style="font-size: 30px; padding: 10px 0 0 130px ">区块链数据同步实时监控</div>
      <div>
        <div>221-10-23 16:30:27 星期六</div>
        <div style="display: flex; justify-content: flex-end;">刷新</div>
      </div>
    </div>
    <div class="body" flex-direction="row">
      <div class="kuang fontOne" style="flex: 2;">
        <div>已同步</div>
        <div class="di">133</div>
        <div>待同步</div>
        <div class="di">0</div>
        <div>监控延时（毫秒）</div>
        <div class="di">216.0</div>
        <div>状态</div>
        <div style="font-size: 35px; color: rgb(0,204,0)">正常</div>
      </div>
      <div style="flex: 7;">
        <div class="bodyer">
          <div class="kuang fontTwo" style="height: 120px; flex: 2; display: flex;" flex-direction="row">
            <div style="flex: 1; border-right: 1px solid rgb(10,126,233);">
              今日新增/条
              <div style="color: #fff;">0</div>
            </div>
            <div style="flex: 1; border-right: 1px solid rgb(10,126,233)">
              今日修改/条
              <div style="color: #fff;">0</div>
            </div>
            <div style="flex: 1;">
              今日删除/条
              <div style="color: #fff;">0</div>
            </div>
          </div>
          <div class="kuang fontThrea" style="height: 120px; flex: 3; color: rgb(1,178,170)">
            已运行： <span style="color: #fff;">50天6小时5分42秒</span>
          </div>
        </div>
        <div class="kuang" style="height: 380px;">
          <div style="box-sizing: border-box; width: 100%; height: 100%;" ref="SCEchart"></div>
        </div>
      </div>
    </div>

    <div class="foot kuang">
      <el-input placeholder="请输入内容筛选" style="width: 300px; border: 2px solid rgb(5,110,112); border-radius: 6px; margin-bottom: 15px;"></el-input>
      <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="groupName" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="groupName" label="Baas服务名称" width="150">
        </el-table-column>
        <el-table-column prop="groupName" label="同步数量" width="150">
        </el-table-column>
        <el-table-column prop="groupName" label="链上总数据" width="150">
        </el-table-column>
        <el-table-column prop="groupName" label="今日同步" width="150">
        </el-table-column>
        <el-table-column prop="groupName" label="今日同步异常" width="150">
        </el-table-column>
        <el-table-column prop="groupName" label="待同步" width="150">
        </el-table-column>
        <el-table-column prop="groupName" label="最近数据同步时间" width="200">
        </el-table-column>
        <el-table-column prop="groupName" label="状态" width="150">
        </el-table-column>
        <el-table-column sortable prop="createTime" label="刷新时间" width="209">
          <template slot-scope="scope">
            <div>{{scope.row.createTime|timestampToTime}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import Chart from "echarts";

export default {
  data() {
    return {
      // 列表
      listData: [],
      // 是否加载
      loading: '',
      // 图表
      SCEoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售总笔数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '',
          type: 'bar',
          barGap: 0,
          data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      },
    }
  },
  methods: {
    // 交易总笔数
    getSCE() {
      this.chart = Chart.init(this.$refs.SCEchart)
      this.chart.setOption(this.SCEoption)
    },
  },
  mounted() {
    this.getSCE();
  },
}
</script>

<style scoped>
.head {height: 82px; background: url("/src/scrm_views/static/data_img/header.png"); color: #FFF;display: flex;}
.body {display: flex; }
.body>div {height: 500px; }
.bodyer {height: 120px; display: flex; justify-content: space-between;}
.foot {height: 200px; padding: 20px;}

.kuang {margin:10px;
  background: url("/src/scrm_views/static/data_img/left_line.png") no-repeat left top,
  url("/src/scrm_views/static/data_img/right_line.png") no-repeat right bottom;
}

/deep/ .table__header-wrapper {background: rgb(6,24,45);}

.fontOne{font-size: 25px; color: rgb(10,126,233); box-sizing:border-box; text-align: center; padding: 40px 0;}
.fontTwo{font-size: 20px; color: rgb(10,126,233); box-sizing:border-box; text-align: center; padding-top: 25px;}
.fontThrea{font-size: 25px; color: rgb(10,126,233); box-sizing:border-box; text-align: center; padding: 40px 0;}

.fontOne >div {margin: 15px;}
.fontTwo >div {margin: 15px 0 30px 0;}

.di {border-bottom: 1px solid rgb(0,251,254); color: rgb(0,251,254); width: 60%;}
.fontOne .di {margin-left: 70px;}

/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: rgb(10,73,121);
}
</style>

<style scoped>
/deep/ .el-input__inner {
  background-color: rgba(255, 255 ,255 ,0)
}
/deep/ .el-table__empty-block {
  background-color: rgb(6 24 45);
}
</style>
